<template>
  <div id="timeBtn">
    <Button v-for="(prop, index) in btnText"
            :key="index"
            :type="isTrue ? (activeDateBtn === prop ? 'info' : 'primary') : (activeDateBtn === prop ? 'warning' : 'primary')"
            @click="changeBtn(prop)"
            :class="[index !== btnText.length - 1 ? 'mar-right-10' : '']"
            :style="[index !== btnText.length - 1 ? btnDistance : '']"
            style="display: inline-block; width: 80px; height: 40px;">{{prop}}
    </Button>
  </div>
</template>

<script>
  export default {
    name: 'timeBtn',
    props: {
      // 文本
      btnText: {
        type: Array,
        default: () => {
          return []
        }
      },
      // 是否激活
      activeDateBtn: {
        type: String,
        default: ''
      },
      // 按钮之间 的 距离
      btnDistance: {
        type: Object,
        default: () => {
          return {}
        }
      },
      // isTrue
      isTrue: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {}
    },

    created () {

    },
    mounted () {

    },
    computed: {},
    methods: {
      // 现场自动
      changeBtn (prop) {
        this.$emit('changeBtn', prop)
      }
    },
    destroyed () {

    },
    components: {}
  }
</script>

<style lang='scss' scoped>
  #timeBtn {
   .mar-right-10{
     margin-right: 10px;
   }
  }
</style>
